import React from 'react';
import { Text, View } from '@ray-js/ray'; // 导入基础 UI 组件
// 导入本地PNG图片
import { Image } from '@ray-js/smart-ui';
import styles from './index.module.less'; // 引入模块化样式

// 图标按钮组件
const IconButtonRow = ({ icon, text, onClick, id, index }) => (
  <View
    id={id}
    style={{
      width: '100%',
      paddingLeft: '7px',
      paddingRight: '7px',
      paddingTop: '4px',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'flex-start'
    }}>
    <View
      hoverClassName={styles.pressed}
      hoverStayTime={5}
      onClick={onClick}
      className={styles.col}
      style={{
        paddingBottom: '4px',
        width: '100%',
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        textAlign: 'center',
      }}
    >
      <Image useLoadingSlot width="66rpx" height="66rpx" src={icon} fit="contain" slot={{
        loading: <View style={{ width: "66rpx", height: '66rpx', backgroundColor: '#606060' }}></View>
      }} />
      <Text  style={{ fontSize: 26, color: index > 7 ? 'white' : (index === id ? 'black' : 'white'), marginLeft: '7px', letterSpacing: '1px', fontWeight: '400' }}>{text}</Text> {/* 显示页面标题 */}
    </View>
    {id != 10 && <View style={{
      width: '100%',
      height: '0.5px',
      backgroundColor: 'white'
    }} />}

  </View>
);

export default IconButtonRow;
